<template>
  <div class="center">
    <div class="logon">
      <div :class="overlaylong">
        <div class="overlaylong-Signin" v-if="disfiex == 0">
          <h2 class="overlaylongH2">登录</h2>
          <input type="text" placeholder="用户名" v-model="user.userName" required/>
          <input type="password" placeholder="密码" v-model="user.password" required/>
          <el-link type="info" @click="hehe">忘记密码了？</el-link>
          <button class="inupbutton" @click="handleLogin" :disabled="disable">登录</button>
        </div>
        <div class="overlaylong-Signup" v-if="disfiex == 1">
          <h2 class="overlaylongH2">注册账号</h2>
          <input type="text" placeholder="用户名" v-model="user.userName" required/>
          <input type="text" placeholder="密码" v-model="user.password" required/>
          <input type="text" placeholder="昵称" v-model="user.nickName" required/>
          <button class="inupbutton" @click="handleRegister">注册</button>
        </div>

      </div>
      <div :class="overlaytitle">
        <div class="overlaytitle-Signin" v-if="disfiex == 0">
          <h2 class="overlaytitleH2">你好，朋友!</h2>
          <p class="overlaytitleP">
            你没有账号吗？点击下面按钮注册
          </p>
          <div class="buttongohs" @click="Signin">注册</div>
        </div>
        <div class="overlaytitle-Signup" v-if="disfiex == 1">
          <h2 class="overlaytitleH2">欢迎回来!</h2>
          <p class="overlaytitleP">如果你有账号了，可以点击下面按钮登录</p>
          <div class="buttongohs" @click="Signup">登录</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {login, register, setIp} from "@/api/login.js";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router/index.js";
import axios from "axios";

export default {
  name: 'Login',
  data() {
    return {
      user: {
        userName: '',
        password: '',
        nickName: ''
      },
      disable:false,
      overlaylong: 'overlaylong',
      overlaytitle: 'overlaytitle',
      disfiex: 0
    }
  },
  methods: {
    ElMessage,
    ElMessageBox,
    //登录方法
    handleLogin() {
      this.disable=true
      if (this.user.userName == '' || this.user.password == '') {
        this.disable=false
        return ElMessage({message: '用户名和密码不能为空', type: 'error'})
      }
      login(this.user).then(res => {
        ElMessage({message: '登录成功', type: 'success'})
        localStorage.setItem("token", res.data.token)
        localStorage.setItem("healthUser",JSON.stringify(res.data.user))
        axios.get('https://qifu-api.baidubce.com/ip/local/geo/v1/district').then(res => {
          let kh = {
            ip: res.data.ip,
            province: res.data.data.prov,
            city: res.data.data.city,
            district:res.data.data.district
          }
          setIp(kh)
        }).catch(err=>{
          let kh = {
            ip: '未知',
            province: '未知',
            city: '未知',
            district:'未知'
          }
          setIp(kh)
        })
        this.disable=false
        router.push({name: 'Redirect'})
      }).catch(err=>{
        this.disable=false
      })
    },
    //注册方法
    handleRegister() {
      const usernameRegex = /^[A-Za-z0-9]{6,18}$/;
      const nickNameRegex = /^.{4,12}$/
      if (!usernameRegex.test(this.user.userName)) {
        ElMessage({
          message: '用户名长度为6-18位，且只能包含字母和数字',
          type: 'error',
        })
        return
      }
      if (!nickNameRegex.test(this.user.nickName)) {
        ElMessage({
          message: '昵称长度为4-12之间',
          type: 'error',
        })
        return
      }
      register(this.user).then(res => {
        ElMessage({
          message: '注册成功,正在自动登录',
          type: 'success',
        })
        this.handleLogin()
      })

    },
    hehe() {
      ElMessageBox.alert('忘了我目前也没整啊', '提示', {
        confirmButtonText: '确认',
      })
    },
    Signin() {
      this.overlaylong = "overlaylongleft"
      this.overlaytitle = "overlaytitleright"
      setTimeout(() => {
        this.disfiex = 1
      }, 200)
    },
    Signup() {
      this.overlaylong = "overlaylongright"
      this.overlaytitle = "overlaytitleleft"

      setTimeout(() => {
        this.disfiex = 0
      }, 200)

    },


  }
}
</script>

<style scoped>
.center {
  width: 1600px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
}

h1 {
  font-size: 30px;
  color: black;
}

.logon {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  /* position: relative;
  overflow: hidden; */
  width: 768px;
  max-width: 100%;
  min-height: 480px;
  margin-top: 20px;
  display: flex;
  background: -webkit-linear-gradient(right, #4284db, #29eac4);
}

.overlaylong {
  border-radius: 10px 0 0 10px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaylongleft {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transform: translateX(100%);
  transition: transform 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaylongright {
  border-radius: 10px 0 0 10px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transform: translateX(0%);
  transition: transform 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaytitle {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
}


.overlaytitleH2 {
  font-size: 30px;
  color: #fff;
  margin-top: 20px;
}

.overlaytitleP {
  font-size: 15px;
  color: #fff;
  margin-top: 20px;
}

.overlaytitleleft {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0%);
  transition: transform 0.6s ease-in-out;
}

.overlaytitleright {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-100%);
  transition: transform 0.6s ease-in-out;
}

.overlaytitle-Signin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlaytitle-Signup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.buttongohs {
  width: 180px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  margin-top: 40px;
}

.overlaylongH2 {
  font-size: 25px;
  color: black;
  /* width: 250px; */
}

.overlaylong-Signin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlaylong-Signup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

input {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
  width: 240px;
}

h3 {
  font-size: 15px;
  margin-top: 10px;
  cursor: pointer;
}

.inupbutton {
  background-color: #29eac4;
  border: none;
  width: 180px;
  height: 40px;
  border-radius: 50px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  margin-top: 30px;
}

</style>